<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Camera</title>
        <link href="../resources/css/bootstrap.css" rel="stylesheet">
        <link href="../resources/css/style.css" rel="stylesheet">
    </head>
    <body style="height: 100%; overflow: hidden">
        <nav class="navbar navbar-default bg-primary navbar-fixed-top ">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand navbar-logo" width="120" href="#"><img src="../resources/images/introlab_icon.png"></a>
                        <a class="navbar-brand" width="120" href="#"><span>ODAS Studio</span></a>
                    </div>
                </div>
            </nav>

        <div id="share-model" class="container-fluid p-body">
            <div class="row">
                <div class="col-sm-12">
                        <!--<video style="position:absolute; top:0px; left:0px; z-index:-10; max-width:100vw; max-height:100vh; padding-bottom:80px"  id="video-frame" autoplay></video>-->
                        <img style="position:absolute; top:0px; left:0px; z-index:-10; width: 100%; max-height: 100vh; max-width: auto; object-fit: contain; object-position: top left; padding-bottom:80px"  id="video-frame" src="http://192.168.1.107:8080/?action=stream"></img>
                        <canvas style="position:absolute; display:none" class="marker" ></canvas>
                        <canvas style="position:absolute; display:none" class="marker" ></canvas>
                        <canvas style="position:absolute; display:none" class="marker" ></canvas>
                        <canvas style="position:absolute; display:none" class="marker" ></canvas>
                </div>
            </div>
        </div>

        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <p class="col-xs-10 text-muted">Graphic interface for ODAS library</p>
                    <a href="javascript:window.close()" class="col-xs-2 text-right">Close</a>
                </div>
            </div>
        </footer>

        <script>window.$ = window.jQuery = require('./../resources/js/jquery.min.js');</script>
        <script src="./../resources/js/bootstrap.min.js"></script>
        <script src="./../resources/js/bootstrap-toggle.min.js"></script>
        <script src="./../resources/js/vue.js"></script>
        <script src="./../resources/js/share-model.js"></script>
    </body>
</html>
